<template>
  <div>
<!--使用draggable组件-->
<div class="itxst">
<!-- <div style="padding-left:6px">常用运算符,左边往右边拖动试试看</div> -->
<div class="topTitle" style="padding-left:6px">
    <div class="left">
        常用运算符
    </div>
    <div class="content">
        <div class="content2">
            <div class="contentItem">
            <i class="tops">左边往中间拖动试试看</i>
        </div>
        <div class="contentItem">
         <i>
             1.中间为工作区,左右为常驻列表区域
             </i>   
        </div>
        <div class="contentItem">
           <i>
                2.可将工作区方块拖动左侧进行删除
           </i>
        </div>
        </div>
    </div>
    <div class="right">
        类别代码
    </div>
</div>
<div class="col col1">
 <draggable v-model="arr1" ghostClass="ghost" chosenClass="chosen" @remove='onRemove'   @end="end1" :options="{group:{name: 'itxst',pull:'clone'},sort: false}"  animation="300"   >
    <transition-group>
     <div class="item" v-for="item in arr1" :id="item.id" :key="item.id">{{item.name}}</div>
    </transition-group>
</draggable>
 </div>
 <div class="col col2">
 <draggable v-model="arr2" ghostClass="ghost" chosenClass="chosen"   @end="end2" group="itxst"  animation="300"  >
    <transition-group>
     <div class="item2" v-for="item in arr2" :id="item.id" :key="item.id">{{item.name}}</div>
    </transition-group>
</draggable>
 </div>

 <div class="col col1 col3">
 <draggable v-model="arr3" :scroll="true" ghostClass="ghost" chosenClass="chosen" @remove='onRemove3' :options="{group:{name: 'itxst',pull:'clone',put:'false'},sort: false}"  animation="300"   >
    <transition-group>
     <div class="item" v-for="item in arr3" :id="item.id" :key="item.id">{{item.name}}</div>
    </transition-group>
</draggable>
 </div>
  </div>
  <div class="bottomContent">
     {{sql}}
 </div>
  </div>
</template>
<script>
// 导入draggable组件
    import draggable from 'vuedraggable'
    import _ from 'lodash'
    export default {
        // 注册draggable组件
        components: {
            draggable
        },
        data () {
            return {
                offetNum: 99999999,
                // 定义要被拖拽对象的数组
                arr1: [
                    { id: 8, name: '(' },
                    { id: 9, name: ')' },
                    { id: 1, name: '等于' },
                    { id: 2, name: '大于' },
                    { id: 3, name: '小于' },
                    { id: 5, name: '大于等于' },
                    { id: 4, name: '小于等于' },
                    { id: 6, name: '不包含' },
                    { id: 7, name: '属于' },
                    { id: 10, name: 'AND' },
                    { id: 11, name: 'OR' }
                ],
                arr2: [
                    // { id: 30, name: '人员姓名' }
                ],
                arr3: [
                    { id: 118, name: '人员类别代码' },
                    { id: 119, name: '人员类别名称' },
                    { id: 111, name: '姓名' },
                    { id: 112, name: '性别代码' },
                    { id: 113, name: '性别中文' },
                    { id: 115, name: '出生日期' },
                    { id: 114, name: '国家地区代码' },
                    { id: 116, name: '国家地区名称' },
                    { id: 117, name: '曾用名' },
                    { id: 1110, name: '家庭住址' },
                    { id: 1111, name: '英文名' },
                    { id: 1112, name: 'xxx' }
                ],
                moveId: -1
            }
        },
        created () {
            this.arr3 = this.arr3.map(item => {
                return {
                    ...item,
                    id: item.id + this.offetNum
                }
            })
        },
        computed: {
            sql () {
                let newList = this.arr2.map(item => item.name)
                return newList.join(' ')
            }
        },
        methods: {
            // 左边往右边拖动时的事件
            end1 (e) {
                var that = this
                var items = this.arr2.filter(function (m) {
                    return m.id === that.moveId
                })
                // 如果左边
                if (items.length < 2) return
                this.arr2.splice(e.newDraggableIndex, 1)
            },
            // 右边往左边拖动时的事件
            end2 (e) {
                const NAME = e.item.innerText
                const ID = e.item.id
                let items = _.find(this.arr1, item => {
                    return (item.id === ID && item.name === NAME)
                })
                if (_.isEmpty(items)) {
                    this.arr1.splice(e.newDraggableIndex, 1)
                } else {
                    this.arr1.splice(e.newDraggableIndex, 1)
                }
            },
            // move回调方法
            onMove (e, originalEvent) {
                console.log(originalEvent)
                // console.log(e.relatedContext.element.name)
                // this.moveId = e.relatedContext.element.id
                // 不允许停靠
                // if (e.relatedContext.element.id === 1) return false
                // 不允许拖拽
                // if (e.draggedContext.element.id === 4) return false
                // if (e.draggedContext.element.id === 11) return false
                return true
            },
            start (e) {
            },
            onRemove (e) {
                let Index = _.findIndex(this.arr1, item => {
                    return item.id === Number(e.item.id)
                })
                let items = _.find(this.arr1, item => {
                    return item.id === Number(e.item.id)
                })
                let newItems = {
                    name: items.name,
                    id: items.id + 11
                }
                this.arr1.splice(Index, 1, newItems)
            },
            onRemove3 (e) {
                let newId = Number(e.item.id)
                let Index = _.findIndex(this.arr3, item => {
                    return item.id === Number(newId)
                })
                let items = _.find(this.arr3, item => {
                    return item.id === Number(newId)
                })
                let newItems = {
                    name: items.name,
                    id: items.id + 14
                }
                this.arr3.splice(Index, 1, newItems)
            }
        }
    }
    // eslint-disable-next-line no-extend-native
    Array.prototype.filter = Array.prototype.filter || function (func) {
        var arr = this
        var r = []
        for (var i = 0; i < arr.length; i++) {
            if (func(arr[i], i, arr)) {
                r.push(arr[i])
            }
        }
        return r
    }
</script>
<style scoped>
      .itxst {
          margin: 10px;
           text-align :left;
      }
      .col {
          width: 40%;
          flex: 1;
          padding: 10px;
          border: solid 1px #eee;
          border-radius: 5px;
          float: left;
      }
      .col + .col {
          margin-left: 10px;
      }
      .item {
          padding: 6px 12px;
          margin: 0px 10px 0px 10px;
          border: solid 1px #b3d8ff;;
          background-color: #ecf5ff;
          text-align: left;
          display: inline-block;
          width: 60px;
          color: #409EFF;
      }
      .item + .item {
          border-top: none;
          margin-top: 6px;
      }

      .item:hover {
          background-color: #fdfdfd;
          cursor: move;
      }
      .item2 {
          padding: 6px 12px;
          margin: 0px 10px 0px 10px;
          border: solid 1px #eee;
          background-color: pink;
          text-align: left;

      }
      .item2 + .item2 {
          border-top: none;
          margin-top: 6px;
      }

      .item2:hover {
           outline: solid 1px #ddd;
          cursor: move;
      }
      .col1{
          max-width: 110px;
          height: 426px;
            overflow-y: auto;
      }
      .col2{
          width: calc(100% - 340px);
          height: 260px;
      }
      .col2>div{
          height: 260px;
      }
      .col2>div>span{
          display: inline-block;
          width: 100%;
          height: 260px;
      }
      .col2 .item2 {
          display: inline-block;
      }

      .chosen{
    background-color: #000 !important;
    color: #fff;
  }
  .ghost{
    background-color: rgb(0, 132, 255) !important;
  }
  .col3{
      max-width: 140px;
      height: 426px;
      overflow-y: auto;
  }
  .col3 .item {
      width: 90px !important;

  }
  .bottomContent{
      background: #f1f1f1;
      border-radius: 10px;
      border: 1px solid #eee;
      width: calc(100% - 340px);
      padding: 10px;
      box-sizing: border-box;
      height: 156px;
      position: relative;
      bottom: 157px;
      left: 154px;
      overflow: hidden;

      font-size: 20px;
      font-weight: 700;
  }
  .topTitle{
      width: 100%;
      position: relative;
  }
  .left, .right, .content {
      display: inline-block;
  }
  .left{
      width: 120px;
  }
  .content{
      width: calc(100% - 296px);
      position: relative;
      height: 10px;
  }
  .content2{
      position: absolute;
      bottom: 20px;
      text-align: center;
      width: 100%;
  }
  .contentItem{
      width: 100%;
      color: rgb(138, 138, 138);
  }
  .tops{
      font-size: 18px;
      color: #409EFF;
  }
</style>
